<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG SCADA - Hot Water Temperature </title>
  <script type="text/javascript" src="../../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../../highlightCode.js"></script>
  <link href='../../../highlight.css' rel='stylesheet' />

  <script type="text/javascript" src="analogGaugeObject.js"></script>
 <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js"></script>



<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body  style='padding:10px;font-family:arial'>
<center>
<h4>SVG SCADA - Hot Water Temperature </h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>

   This shows a real-time interactive SVG SCADA drawing of a building's heating hot water system. A field temperature
   transmitter is sending its data over the DSN to the temperature gauge in the SVG SCADA drawing.

</div>
<table>
<tr>
<td>
<div style="width:400px;padding:10px;">
   <b> Scenario:</b> <br>
 The data from the field-mounted temperature transmitter is sent over the DSN every two(2) seconds. When it arrives at the SVG SCADA drawing, the dial of the temperature gauge moves to display the data.
 <br><br>
 Select 'Start Sending' button.<br><br>
 Values are sent over the 'hot_water_temperature' channel.<br>
 (Note: The temperature values sent are randomly generated.)
</div>

</td>
<td>
<div id="svgDiv" style='border:1px solid black;width:440px;height:360px;'>

</div>
<CENTER>Status:<span id=connectedSpan style='color:green'></span>  <br>
<button onClick=startSending() id=startSendingButton >Start Sending</button>
<button disabled onClick=stopSending() id=stopSendingButton>Stop Sending</button>
</td>
</tr></table>

  <br><button title="Show Javascript Source" onclick=showSource()>Javascript Source</button>

 <div id=sourceDiv style=overflow:auto;width:100%;height:1px;visibility:hidden;>
  <br>Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:90%;text-align:left; ></div>
</div>
</center>
<script id=myScript>
//---dependency: https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js

//--onload---
var pubnub
function initialize()
{
    pubnub = new PubNub(
    {
        publishKey : 'pub-c-ea28c028-e01a-4d16-80ec-0ad017c8a0a1',
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
   })
    pubnub.addListener(
    {
        status: function(statusEvent)
        {
            connectedSpan.innerHTML="CONNECTED"
        }
    })

    console.log("Subscribing..");
    pubnub.subscribe(
    {
        channels: ['hot_water_temperature']
    });
}

var Message
function publishTemperature()
{
    Message= (Math.random() * 20) + 140
    var publishConfig =
    {
        channel : "hot_water_temperature",
        message :Message
    }
    pubnub.publish(publishConfig, function(status, response)
    {
        console.log(status, response);
        changeGaugeHWS(Message)
    })
}

function changeGaugeHWS(value)
{
    var key="gaugeHWS"
    gauges[key].redraw(value);
}
//---buttons--
var PublishInterval
function startSending()
{
    PublishInterval=setInterval(publishTemperature,2000)
    stopSendingButton.disabled=false
    startSendingButton.disabled=true
}
function stopSending()
{
    clearInterval(PublishInterval)
    stopSendingButton.disabled=true
    startSendingButton.disabled=false
}

</script>
<script>

function loadFileSVG()
{
    var SVGFile="example1.svg"
    var loadXML = new XMLHttpRequest;
    loadXML.onload = callback;
    loadXML.open("GET", SVGFile, true);
    loadXML.send();
    function callback()
    {
        svgDiv.innerHTML=loadXML.responseText
        createThisGauge()
    }
}


function createThisGauge() //----this application configuration----
{
    createGauge("gaugeHWS", "HWS",80,220,5,10,"#9932CC","yellow",100,[180,200],[200,220],null,"\u00B0F");
}

document.addEventListener("onload",init(),false)
function init()
{
    initialize()
    loadFileSVG()
    showSourceJS()

}

function showSource()
{
  sourceDiv.style.visibility="visible"
  sourceDiv.style.height=+sourceDiv.scrollHeight+"px"
}

</script>

</body>

</html>